<template>
    <div class="execution">
        <basic-container>
            <style-page
                :showTabsRight='true'
            >
                <template slot="buttons">
                    <el-button type="info" size='small'>商机跟进</el-button>
                    <el-button type="info" size='small'>编辑</el-button>
                    <el-button type="info" size='small'>添加协作人</el-button>
                    <el-button type="info" size='small'>商机转移</el-button>
                </template>
                <template slot="tabs">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="基本资料" name="first">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>基本信息</span>
                                </div>
                                <div class="firstitem">
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembottombox">
                                        <aside>商机标题</aside>
                                        <article>这是备注类字段，属于可伸缩的输入框，建议默认占的长度为普通文本框的三倍长，大概就是现在这样子的展示效果；</article>
                                    </div>
                                </div>
                            </el-card>
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>其他信息</span>
                                </div>
                                <div class="firstitem">
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                </div>
                            </el-card>
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>跟进人信息</span>
                                </div>
                                <div class="firstitem">
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                    <div class="itembox">
                                        <aside>商机标题</aside>
                                        <article>这里是商机标题</article>
                                    </div>
                                </div>
                            </el-card>
                        </el-tab-pane>

                        <el-tab-pane label="客户联系人" name="second">
                            <omscustomerlink />
                        </el-tab-pane>
                        <el-tab-pane label="合同文件" name="third">
                            <omscustomercontract />
                        </el-tab-pane>
                        <el-tab-pane label="销售产品" name="fourth">
                            销售产品
                        </el-tab-pane>
                        <el-tab-pane label="订单与费用" name="five">
                            订单与费用
                        </el-tab-pane>
                        <!-- <el-tab-pane label="关联附件" name="six">
                            <omsbusinessattach />
                        </el-tab-pane> -->
                    </el-tabs>
                </template>
                <template slot="tabs-right">
                     <el-tabs v-model="rightActiveName">
                        <el-tab-pane label="销售动态" name="first">
                            <p>跟进记录</p><hr/>
                            <div class="timeblock">
                                <el-timeline>
                                    <el-timeline-item
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    :icon="activity.icon"
                                    :type="activity.type"
                                    :color="activity.color"
                                    :size="activity.size">
                                    <!-- <div class="headerimg"></div> -->
                                        {{activity.name}}<br/>
                                        {{activity.createTime}}
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="关联信息" name="second">关联信息</el-tab-pane>
                    </el-tabs>
                </template>
            </style-page>
        </basic-container>
    </div>
</template>

<script>
    import omscustomerlink from '@/views/saas-business/omscustomerlink/views/omscustomerlink/index.vue'
    import omsbusinessattach from '@/views/saas-business/omsbusinessattach/views/omsbusinessattach/index.vue'
    import omscustomercontract from '@/views/saas-business/omscustomercontract/views/omscustomercontract/index.vue'
    import {fetchBusinessLogoms} from '@/views/saas-business/examine/api/omsbusiness'

    export default {
        components:{
            omscustomerlink,
            omsbusinessattach,
            omscustomercontract,
        },
        data() {
            return {
                activeName: 'first',
                rightActiveName: 'first',
                activities: []
            };
        },
        mounted(){
            fetchBusinessLogoms().then(response => {
                this.activities = response.data.data.records
                console.log(this.activities);
            })
        },
        methods:{

        },
    }
</script>

<style scoped lang='scss'>
.execution {
    .basic-container {
        padding-top: 10px;
    }
}
</style>